<template>
<div class="upload">

    <el-upload
            class="upload-demo"
            drag
            :action="url"
            :on-success="handle_upload"
            :before-upload="beforeUpload"
            :on-error="handle_error"
            :show-file-list=false
            multiple
    >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
            Drop file here or <em>click to upload</em>
        </div>
        <div></div>
        <template #tip>
            <div class="el-upload__tip">
                {{change_name}} files with a size less than 50MB
            </div>
        </template>
    </el-upload>
    <div class="show" v-if="flag">
        <el-descriptions
            :title="title"
            direction="vertical"
            :column="4"
            border
        >
            <el-descriptions-item label="文件名" >{{file.file_name}}</el-descriptions-item>
            <el-descriptions-item label="转换类型" >{{file.file_type}}</el-descriptions-item>
            <el-descriptions-item label="下载地址" >
                <el-button type="primary" round>
                    <el-link :href="downloadUrl" target="_blank" style="color: white; text-decoration: none">
                        下载
                    </el-link>
            </el-button>
            </el-descriptions-item>
        </el-descriptions>
    </div>

</div>
</template>

<script>
import UploadProps, {ElMessage} from 'element-plus'
import {computed, ref} from "vue";
export default {
    name: "Upload",
    props: {
        label: String,
        changeId: String
    },
    setup(props){

        let flag = ref(false);

        // eslint-disable-next-line vue/no-setup-props-destructure
        let title = computed(()=>{
            return props.label;
        });

        let change_name=computed(()=>{
            return props.label.slice(0,props.label.indexOf('转')).toLowerCase();
        })

        let change_id=computed(()=>{
            return props.changeId;
        })

        let url=computed(()=>{
            return "http://127.0.0.1:8088/file/upload/"+change_id.value;
        });

        let downloadUrl=computed(()=>{
            return "http://127.0.0.1:8088/file/download"+"?filename="+file.value.file_name;
        });

        let file=ref({
            file_name:'',
            file_type:'',
        });


        const beforeUpload = UploadProps['beforeUpload'] = (rawFile) => {
            let type=rawFile.type;
            if (type.toString().includes(change_name.value,0)){
                return true
            }else {
                ElMessage({type:"error",message:"上传文件类型错误"})
                return false
            }
        };

        const handle_upload = UploadProps['onSuccess'] =(res, UploadFile, UploadFiles) => {
            let uploadFile=UploadFile.raw;
            let name=res.map.saveFileName;
            console.log(res);
            console.log(UploadFile);
            console.log(UploadFiles)
            console.log(uploadFile)
            file.value.file_name=name;
            file.value.file_type=title.value;
            flag.value=true;

        };

        const handle_error = UploadProps['onError'] =(error, UploadFile, UploadFiles) => {
            console.log(error.message)
            ElMessage({type:"error",message:error.message})
            console.log(UploadFile.raw);
            console.log(UploadFiles);

        };

        return{
            url,
            flag,
            title,
            file,
            change_id,
            change_name,
            downloadUrl,
            UploadProps,
            beforeUpload,
            handle_upload,
            handle_error
        };
    },

}
</script>

<style scoped>
.el-icon--upload{
    margin-right: 50px;
}
.el-icon--upload svg{
    width: 5em;
    height: 5em;
}

</style>
